<template>
  <div class="forget">
    <div class="forget-header">
      <el-page-header @back="$router.go(-1)">
        <template #content>
          <h4>忘记密码</h4>
        </template>
      </el-page-header>
    </div>

    <div class="card-wrapper flex">
      <card-form
        ref="formRef"
        v-model="formData"
        :rules="rules"
        class="card-form"
        v-bind="formConfig"
      >
        <template v-if="!showResult">
          <el-form-item
            label="账号"
            prop="account"
          >
            <el-input
              v-model="formData.account"
              placeholder="注册时填写的登录账号"
            />
          </el-form-item>
          <el-form-item
            label="手机号"
            prop="phone"
          >
            <el-input
              v-model="formData.phone"
              placeholder="注册时填写的手机号"
            />
          </el-form-item>
          <el-form-item
            label="验证码"
            prop="code"
          >
            <div class="send-code">
              <el-input
                v-model="formData.code"
                placeholder="手机验证码"
              />
              <el-button
                :disabled="disabled"
                @click="sendCode(formData.phone)"
              >
                {{ buttonText }}
              </el-button>
            </div>
          </el-form-item>
          <el-form-item
            label="新密码"
            prop="newPwd"
          >
            <el-input
              v-model="formData.newPwd"
              show-password
              placeholder="填写新的登录密码"
              type="password"
            />
          </el-form-item>
          <el-form-item
            label="确认新密码"
            prop="confirmPwd"
          >
            <el-input
              v-model="formData.confirmPwd"
              show-password
              placeholder="再次确认新密码"
              type="password"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submit"
            >提交</el-button>
          </el-form-item>
        </template>
        <el-result
          v-else
          icon="success"
          title="密码重置成功"
          sub-title="可以使用新密码登录了"
        >
          <template #extra>
            <el-button
              type="primary"
              @click="$router.replace(`/${LOGIN_NAME}`)"
            >返回登录</el-button>
          </template>
        </el-result>
      </card-form>
    </div>
  </div>
</template>

<script setup>
import { LOGIN_NAME } from '@/const/router'
import useForm from '@/hooks/useForm'
import useSendCode from '@/hooks/useSendCode'
import CardForm from '@/components/wrapper/card-form'

const { formData, formRef, formConfig } = useForm(
  {
    account: '',
    phone: '',
    code: '',
    newPwd: '',
    confirmPwd: '',
  },
  { labelWidth: 100 },
)
const { disabled, buttonText, sendCode } = useSendCode()

const showResult = ref(false)
const rules = {
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
  newPwd: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
  confirmPwd: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (_rule, value, callback) => {
        if (value !== formData.value.newPwd) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
    },
  ],
}

async function submit() {
  await formRef.value.validate()
  showResult.value = true
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/mixins.scss';

.forget {
  &-header {
    padding: $space-medium-s;
    background-color: var(--el-bg-color);
    margin-bottom: $space-medium-s;
  }

  .card-wrapper {
    width: 100%;
    flex-direction: column;
    justify-content: center;
  }

  .send-code {
    width: 100%;
    display: flex;

    .el-button {
      margin-left: $space-small;
    }
  }
}

.card-form {
  @include responsive-style('large-screen') {
    width: 40%;
  }

  @include responsive-style('phone') {
    width: 90%;
  }
}
</style>
